<!-- 文件名: app/templates/user_detail.html -->
{% extends "base.html" %}

{% block title %}{{ user.username }} - 社交媒体监控{% endblock %}

{% block page_title %}用户详情{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-2">
                {% if user.profile_pic %}
                <img src="{{ user.profile_pic }}" class="img-fluid rounded-circle" alt="{{ user.username }}">
                {% else %}
                <img src="/static/default-avatar.png" class="img-fluid rounded-circle" alt="{{ user.username }}">
                {% endif %}
            </div>
            <div class="col-md-10">
                <h3>{{ user.username }} <span class="badge platform-{{ user.platform }}">{{ user.platform }}</span></h3>
                <p>{{ user.signature }}</p>
                <p>视频数量: {{ user.last_video_count }}</p>
                <p>最后检查时间: {{ user.last_checked }}</p>
                <p>添加时间: {{ user.created_at }}</p>
                <!-- 添加用户主页链接按钮 -->
                {% if user.platform == 'tiktok' %}
                <a href="https://www.tiktok.com/@{{ user.username }}" target="_blank" class="btn btn-info">
                    <i class="bi bi-box-arrow-up-right"></i> 访问TikTok主页
                </a>
                {% elif user.platform == 'douyin' %}
                <a href="https://www.douyin.com/user/{{ user.sec_uid }}" target="_blank" class="btn btn-info">
                    <i class="bi bi-box-arrow-up-right"></i> 访问抖音主页
                </a>
                {% elif user.platform == 'instagram' %}
                <a href="https://www.instagram.com/{{ user.username }}" target="_blank" class="btn btn-info">
                    <i class="bi bi-box-arrow-up-right"></i> 访问Instagram主页
                </a>
                {% elif user.platform == 'kuaishou' %}
                <a href="https://www.kuaishou.com/profile/{{ user.sec_uid }}" target="_blank" class="btn btn-info">
                    <i class="bi bi-box-arrow-up-right"></i> 访问快手主页
                </a>
                {% endif %}
                <a href="/api/check-updates?user_id={{ user.id }}" class="btn btn-primary">检查更新</a>
                <a href="/videos?user_id={{ user.id }}" class="btn btn-secondary">查看全部视频</a>
                <a href="/users" class="btn btn-light">返回列表</a>
            </div>
        </div>
    </div>
</div>

<!-- 最近视频标题栏 -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4>最近视频</h4>
    <div>
        <form method="get" action="/users/{{ user.id }}" class="d-inline">
            <select name="per_page" class="form-select form-select-sm d-inline-block" style="width: auto;"
                    onchange="this.form.submit()">
                <option value="6" {% if pagination.per_page== 6 %}selected{% endif %}>显示 6 个</option>
                <option value="12" {% if pagination.per_page== 12 %}selected{% endif %}>显示 12 个</option>
                <option value="18" {% if pagination.per_page== 18 %}selected{% endif %}>显示 18 个</option>
                <option value="24" {% if pagination.per_page== 24 %}selected{% endif %}>显示 24 个</option>
            </select>
        </form>
    </div>
</div>

<!-- 视频网格 -->
<div class="row">
    {% if videos|length == 0 %}
    <div class="col-12">
        <div class="alert alert-info">
            暂无视频数据
        </div>
    </div>
    {% else %}
    {% for video in videos %}
    <div class="col-md-4 col-lg-4 video-container">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title text-truncate" title="{{ video.title }}">{{ video.title }}</h5>
                <p class="card-text">添加时间: {{ video.created_at }}</p>
                <p class="card-text">
                    状态:
                    {% if video.download_status == "downloaded" %}
                    <span class="badge bg-success">已下载</span>
                    {% elif video.download_status == "pending" %}
                    <span class="badge bg-warning">下载中</span>
                    {% else %}
                    <span class="badge bg-danger">下载失败</span>
                    {% endif %}
                </p>
            </div>
            <div class="card-footer bg-transparent border-top-0">
                {% if video.download_status == "downloaded" %}
                <a href="/play/{{ video.id }}" class="btn btn-primary">播放</a>
                {% elif video.download_status == "failed" and video.last_download_url %}
                <a href="{{ video.last_download_url }}" target="_blank" class="btn btn-warning">
                    <i class="bi bi-download"></i> 手动下载
                </a>
                {% endif %}
                <a href="#" class="btn btn-danger"
                   onclick="deleteVideo({{ video.id }}, '{{ video.title|truncate(20) }}'); return false;">删除</a>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}
</div>

<!-- 分页导航 -->
{% if pagination.pages > 1 %}
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        <li class="page-item {% if pagination.page == 1 %}disabled{% endif %}">
            <a class="page-link" href="/users/{{ user.id }}?page=1&per_page={{ pagination.per_page }}"
               aria-label="First">
                <span aria-hidden="true">首页</span>
            </a>
        </li>
        <li class="page-item {% if pagination.page == 1 %}disabled{% endif %}">
            <a class="page-link"
               href="/users/{{ user.id }}?page={{ pagination.page - 1 }}&per_page={{ pagination.per_page }}"
               aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>

        {% set start_page = (pagination.page - 2) if (pagination.page - 2) > 0 else 1 %}
        {% set end_page = (start_page + 4) if (start_page + 4) <= pagination.pages else pagination.pages %}
        {% if end_page - start_page < 4 and start_page > 1 %}
        {% set start_page = (end_page - 4) if (end_page - 4) > 0 else 1 %}
        {% endif %}

        {% for p in range(start_page, end_page + 1) %}
        <li class="page-item {% if p == pagination.page %}active{% endif %}">
            <a class="page-link" href="/users/{{ user.id }}?page={{ p }}&per_page={{ pagination.per_page }}">{{ p }}</a>
        </li>
        {% endfor %}

        <li class="page-item {% if pagination.page == pagination.pages %}disabled{% endif %}">
            <a class="page-link"
               href="/users/{{ user.id }}?page={{ pagination.page + 1 }}&per_page={{ pagination.per_page }}"
               aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
        <li class="page-item {% if pagination.page == pagination.pages %}disabled{% endif %}">
            <a class="page-link"
               href="/users/{{ user.id }}?page={{ pagination.pages }}&per_page={{ pagination.per_page }}"
               aria-label="Last">
                <span aria-hidden="true">末页</span>
            </a>
        </li>
    </ul>
</nav>
<div class="text-center">
    <small class="text-muted">共 {{ total_videos }} 个视频，当前第 {{ pagination.page }}/{{ pagination.pages }}
        页</small>
</div>
{% else %}
{% if total_videos > 0 %}
<div class="mt-3 text-center">
    <small class="text-muted">共 {{ total_videos }} 个视频</small>
</div>
{% endif %}
{% endif %}

{% if total_videos > pagination.per_page %}
<div class="text-center mt-3">
    <a href="/videos?user_id={{ user.id }}" class="btn btn-info">查看全部视频 ({{ total_videos }})</a>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
    function deleteVideo(videoId, title) {
        if (confirm(`确定要删除视频 "${title}" 吗？此操作不可恢复。`)) {
            fetch(`/api/videos/${videoId}`, {
                method: 'DELETE',
            })
                .then(response => {
                    if (response.ok) {
                        alert('视频删除成功');
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
        }
    }
</script>
{% endblock %}